<template>
    <ElSpace>
        <ElButton v-for="p in ps" type="primary" @click="btnPosition = p">{{ p }}</ElButton>
    </ElSpace>
    <div style="margin-top: 10px;"></div>
    <ProForm :columns="formColumns" :span="8" :btn-position="btnPosition" @ok="submit" />
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { createProForm, ProForm } from '@howuse/element-plus-form'
import { ElSpace, ElButton } from 'element-plus'
import { ref } from 'vue';

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    alert(JSON.stringify(raw))
}
// === 按钮位置修改 ===
const btnPosition = ref("right")
const ps = ["right", "left", "center", "float-end", "col"]
</script>